<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Element UI + ECharts 布局</title>
<!-- 引入Element UI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 引入Element UI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
.el-header, .el-footer {
background: #409EFF;
color: white;
line-height: 60px;
padding: 0 20px !important;
}
.chart-container {
width: 100%;
height: 100%;
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<el-container style="height: 100vh; flex-direction: column">
<!-- 头部 -->
<el-header style="height: 60px;">
<el-row style="width: 100%">
<el-col :span="12">系统标题</el-col>
<el-col :span="12" style="text-align: right">
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link" style="color: white; cursor: pointer">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">菜单项1</el-dropdown-item>
<el-dropdown-item command="b">菜单项2</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</el-header>

<!-- 中间内容 -->
<el-main style="flex: 1; padding: 0;">
<el-row :gutter="20" style="height: 100%; margin: 0; padding: 20px">
<el-col
v-for="(item, index) in 9"
:key="index"
:span="8"
style="height: 33.33%; margin-bottom: 20px"
>
<div
:ref="'chart' + index"
class="chart-container"
></div>
</el-col>
</el-row>
</el-main>

<!-- 底部 -->
<el-footer style="height: 60px;">
底部信息  2023
</el-footer>
</el-container>
</div>

<script>
new Vue({
el: '#app',
data() {
return {
charts: []
};
},
mounted() {
this.initCharts();
window.addEventListener('resize', this.resizeCharts);
},
beforeDestroy() {
window.removeEventListener('resize', this.resizeCharts);
},
methods: {
handleCommand(command) {
console.log('command:', command);
},
initCharts() {
this.$nextTick(() => {
this.charts = [];
for (let i = 0; i < 9; i++) {
const chartDom = this.$refs[`chart${i}`][0];
const chart = echarts.init(chartDom);
const option = this.getChartOption(i);
chart.setOption(option);
this.charts.push(chart);
}
});
},
getChartOption(index) {
const chartTypes = [
'bar', 'line', 'pie','scatter', 'effectScatter',
'barLineMix', 'barStack', 'rose', 'funnel'
];
const chartType = chartTypes[index % chartTypes.length];
let option = {
// 根据不同图表类型设置相应的标题名称
title: {
text: this.getChartTypeName(chartType) 
},
xAxis: { data: ['A', 'B', 'C', 'D'] },
yAxis: {},
series: []
};
const data = [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100];
switch (chartType) {
case 'bar':
option.series.push({
type: chartType,
data
});
break;
case 'line':
option.series.push({
type: chartType,
data
});
break;
case 'pie':
option = {
title: {
text: this.getChartTypeName(chartType) 
},
series: [{
type: chartType,
data: data.map((val, i) => ({ value: val, name: `数据${i + 1}` }))
}]
};
break;
case'scatter':
option.series.push({
type: chartType,
data: data.map((val, i) => [i + 1, val])
});
break;
case 'effectScatter':
option.series.push({
type: chartType,
data: data.map((val, i) => [i + 1, val])
});
break;
case 'barLineMix':
option.series.push({
type: 'bar',
data
}, {
type: 'line',
data: data.map(val => val * 1.2)
});
break;
case 'barStack':
option.series.push({
type: 'bar',
stack: '总量',
data
}, {
type: 'bar',
stack: '总量',
data: data.map(val => val * 0.8)
});
break;
case 'rose':
option = {
title: {
text: this.getChartTypeName(chartType) 
},
polar: {},
angleAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
radiusAxis: {},
series: [{
type: 'rose',
radius: '90%',
data: data.map((val, i) => ({ value: val, name: `数据${i + 1}` }))
}]
};
break;
case 'funnel':
option = {
title: {
text: this.getChartTypeName(chartType) 
},
series: [{
type: 'funnel',
data: data.map((val, i) => ({ value: val, name: `数据${i + 1}` }))
}]
};
break;
}
return option;
},
getChartTypeName(type) {
const chartTypeNames = {
'bar': '柱状图',
'line': '折线图',
'pie': '饼图',
'scatter': '散点图',
'effectScatter': '带有涟漪特效的散点图',
'barLineMix': '柱状折线混合图',
'barStack': '堆积柱状图',
'rose': '玫瑰图',
'funnel': '漏斗图'
};
return chartTypeNames[type];
},
resizeCharts() {
this.charts.forEach(chart => chart.resize());
}
}
});
</script>
</body>

</html>